<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Tarjetas</title>
<link href="css/960_50col.css" rel="stylesheet" type="text/css" />

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var winWidth = $(window).width();
	var winHeight = $(window).height(); 
	var newPos = winWidth;
	
	$.preloadImages = function(){
  for(var i = 0; i<arguments.length; i++){
    $("<img>").attr("src", arguments[i]);
  }
}
// Para utilizar el script y cargar tus imágenes:
$.preloadImages("img/home.png", "img/visa_clasica.png", "images/mission.png","img/visa_oro.png","img/visa_platinum.png");
	
	$("#parallax").css({"width":winWidth,"height":winHeight});
	$("ul.main li").css({"width":winWidth,"height":winHeight});
	$("ul.photos li").css({"width":winWidth,"height":winHeight});
	var anchoMain = $("ul.main li").length-1;
	
	$(window).resize(function(){
		
		winWidth = $(window).width() ;
		winHeight = $(window).height() ;
		
		 	
		$("ul.main li").css({"width":winWidth});
		$("#parallax").css({"width":winWidth,"height":winHeight});
		$("ul.photos li").css({"width":winWidth,"height":winHeight});
	});
		
	$("#closePa").click(function(){
		$("#parallax").fadeOut("fast");
		});
	$("#viewPar").click(function(){
		$("#parallax").fadeIn("fast");
		});
		
	
	
	//var $paneTarget = $('.contentPane');
	
	$(".arrow_right").click(function(){
		
		var pos= $(".main").css("left").substring($(".main").css("left").length-2,"");
		//console.log(anchoMain);
		if( pos == -(winWidth*anchoMain) ){
			newPos=winWidth*anchoMain*-1;
			}else{
				 newPos = winWidth;
				}
		mover(-newPos);
		
	}); 
	
	$(".arrow_left").click(function(){
		
		if($(".main").css("left") == "0px"){
			newPos=winWidth*anchoMain*-1;
			}else{
				newPos = winWidth;
				}
		mover(newPos);

		}); 
	
	function mover(pos){
		if(!$('ul.main').is(':animated')){
			 $('ul.main').animate({left: '+='+pos},800);
			 $('ul.photos').animate({left: '+='+pos},300);
			}
		}
	
	});
</script>
</head>

<body>
<div class="container_50">
  <div class="grid_50"> <img src="img/home.png" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area id="viewPar" shape="rect" coords="5,121,225,154" href="#" />
    </map>
  </div>
</div>
<div id="parallax"> <img class="f-left" src="img/logo.png" />
  <div id="closePa" class="f-right"> <img src="img/x.png" /> </div>
  <div class="arrow_left"> <img src="img/arrow_left.png" /> </div>
  <div class="arrow_right"> <img src="img/arrow_right.png" /> </div>
  <div class="subMenu"> <img src="img/sub_menu1.png" /> </div>
  <div class="contentPane">
    <ul class="main">
      <li> <img src="img/visa_clasica.png" /> </li>
      <li> <img src="img/visa_oro.png"/> </li>
      <li> <img src="img/visa_platinum.png" /> </li>
    </ul>
    <ul class="photos n1" >
      <li class="helado"></li>
      <li class="muneca"></li>
      <li class="carro"></li>
    </ul>
  </div>
</div>
</body>
</html>
